<template>
    <div class="easyd-weixin-Box">
        <div class="app_page_box" style="bottom: 50px;">
            <div class="app_page">
                <mt-actionsheet class="actionsBox" :actions="actions" v-model="sheetVisible"></mt-actionsheet>

                <div class="user_detail_list app_box_content_list app_list_box MARGIN_BOTTOM_10"
                     v-if="customerBasicInformation>0">
                    <div class="user_detail_info">
                        <div class="app_box_flex">
                            <div class="txt_img">{{customerDetail.customerBasicInformation[0].c_name[0]}}</div>
                            <div class="app_box_content_left user_info">
                                {{customerDetail.customerBasicInformation[0].c_campus_name}}
                                <!--<span class="C4 T4">({{customerDetail.customerBasicInformation[0].c_phone}})</span>-->
                                <i class="fa fa-edit" @click="goCustomerDetail()"></i>
                            </div>
                            <div class="app_box_content_right">
                                <div class="click_btn" @click="changeView()">
                                    <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 0">1类</span>
                                    <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 1">2类</span>
                                    <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 2">3类</span>
                                    <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 3">4类</span>
                                    <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 4">5类</span>
                                    <i class="fa fa-angle-down fa-lg C4"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="user_detail_time app_box_flex C2 T3">
                        <div class="app_box_flex_1 T1 C4">
                            {{customerDetail.customerBasicInformation[0].c_name}}
                            <span class="T3">
                                ({{customerDetail.customerBasicInformation[0].c_position}})
                            </span>
                        </div>
                        <div class="click_btn C4 T3">
                            开办时间：{{customerDetail.customerBasicInformation[0].c_campus_start_time>0?$common.getTimes('','cha','',customerDetail.customerBasicInformation[0].c_campus_start_time):'未填写'}}
                        </div>
                    </div>
                    <div class="user_detail_time app_box_flex C2 T3">
                        <div class="app_box_flex_1 C4">
                            校区面积：{{customerDetail.customerBasicInformation[0].c_area_of}}平
                        </div>
                        <div class="click_btn C4 T3">
                            校区学员：{{customerDetail.customerBasicInformation[0].c_student_count}}人
                        </div>
                    </div>
                    <div class="user_detail_time app_box_flex C2 T3">
                        <div class="app_box_flex_1 C4">
                            教授类型：
                            <span v-for="(item,index) in JSON.parse(customerDetail.customerBasicInformation[0].c_teach_type)">
                                {{item.c_name}}
                            </span>
                            <!--{{customerDetail.customerBasicInformation[0].c_teach_type}}-->
                        </div>
                    </div>
                    <div class="user_detail_time app_box_flex C2 T3">
                        <div class="app_box_flex_1 C4">
                            现有系统：{{customerDetail.customerBasicInformation[0].c_campus_now_system}}
                        </div>
                        <div class="click_btn C4 T3">
                            录入时间：{{$common.getTimes(customerDetail.customerBasicInformation[0].c_create_time,'','-')}}
                        </div>
                    </div>
                    <!--<div class="user_detail_time app_box_flex C2 T3">
                        <div class="app_box_flex_1 C4">校区：{{customerDetail.customerBasicInformation[0].c_campus_name}}
                        </div>
                        <div class="click_btn C4 T3">
                            {{$common.getTimes(customerDetail.customerBasicInformation[0].c_create_time)}}
                        </div>
                        &lt;!&ndash;<div class="click_btn"  @click="changeView()">
                                              <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 0">1类</span>
                                              <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 1">2类</span>
                                              <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 2">3类</span>
                                              <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 3">4类</span>
                                              <span v-if="customerDetail.customerBasicInformation[0].c_evaluation == 4">5类</span>
                                              <i class="fa fa-angle-down fa-lg C4"></i>
                        </div>&ndash;&gt;
                    </div>-->
                </div>
                <div class="app_list_box MARGIN_BOTTOM_10" style="padding:10px;height:50px;"
                     v-if="customerBasicInformation>0 && this.$route.query.isShowStopCustom == false">
                    <span style="float:left;margin-top:5px;">是否放弃跟进</span>
                    <div style="float:right;">
                        <mt-switch @change="followStatusAction" v-model="isStop"></mt-switch>
                    </div>
                </div>
                <div class="app_list_box MARGIN_BOTTOM_10" v-if="followUpRecord>0">
                    <div class="app_box_content">
                        <div class="app_box_content_left">跟进情况</div>
                        <div class="app_box_content_right" @click="historyFollow()">
                            {{customerDetail.followUpRecordCount}}次
                            <span class="fa fa-angle-right fa-lg C4"></span>
                        </div>
                    </div>
                    <div class="material_box T3">
                        <p>{{customerDetail.followUpRecord[0].cfr_way > 0 ?
                            '到店跟进':'电话沟通'}}；{{customerDetail.followUpRecord[0].cfr_content}}</p>
                        <div class="app_box_flex">
                            <div class="app_box_flex_2 C4">
                                跟进时间：
                                <span class="C1">{{$common.getTimes(customerDetail.followUpRecord[0].cfr_create_time)}}</span>
                            </div>
                            <div class="app_box_flex_2 C4">
                                跟进人员：
                                <span class="C1"
                                      v-if="salesmanData>0">{{customerDetail.followUpRecord[0].cfr_name}}</span>
                                <span class="C1" v-else>暂无</span>
                            </div>
                            <!--<div class="app_box_flex_1">
                                                     <span class="C4">跟进次数： 次</span>
                            </div>-->
                        </div>
                        <div class="app_box_flex"
                             v-if="customerDetail.followUpRecord[0].cfr_comment != null && customerDetail.followUpRecord[0].cfr_comment != ''">
                            <div class="app_box_flex_1 C4">
                                跟进点评：
                                <span class="C1">{{customerDetail.followUpRecord[0].cfr_comment}}</span>
                            </div>
                        </div>
                        <!--<div class="app_box_flex">

                                              <div class="app_box_flex_1">
                                                  <span class="C4"
                                                        v-if="customerBasicInformation>0 && customerDetail.customerBasicInformation[0].c_follow_status == 0">当前状态： 未跟进</span>
                                                  <span class="C4"
                                                        v-if="customerBasicInformation>0 && customerDetail.customerBasicInformation[0].c_follow_status == 1">当前状态： 已跟进</span>
                                                  <span class="C4"
                                                        v-if="customerBasicInformation>0 && customerDetail.customerBasicInformation[0].c_follow_status == 2">当前状态： 停止跟进</span>
                                              </div>
                        </div>-->
                    </div>
                </div>

                <div class="app_list_box MARGIN_BOTTOM_10" v-if="customerFinalBrowseRecord>0">
                    <div class="app_box_content">
                        <div class="app_box_content_left">最近历史记录</div>
                        <div class="app_box_content_right"
                             @click="browsingRecords(customerDetail.customerBasicInformation)">
                            <span class="fa fa-ellipsis-h C4"></span>
                        </div>
                    </div>
                    <div class="material_box T3">
                        <div class="C4">
                            {{$common.getTimes(customerDetail.customerFinalBrowseRecord[0].apurr_create_time,'shifen')}}
                        </div>
                        <div v-if="browseContent>0">{{customerDetail.browseContent[0].mc_title}}</div>
                        <div>阅读{{customerDetail.customerFinalBrowseRecord[0].apurr_read_count}}次</div>
                    </div>
                </div>

                <div class="app_list_box MARGIN_BOTTOM_10" v-if="serviceRecordCount>0">
                    <div class="app_box_content">
                        <div class="app_box_content_left">客户服务记录</div>
                        <div class="app_box_content_right" @click="serviceRecord()">
                            <span class="fa fa-angle-right fa-lg C4"></span>
                        </div>
                    </div>
                </div>

                <div class="app_list_box MARGIN_BOTTOM_10" v-if="salesmanData>0 && customerDetail.customerOrders.length > 0">
                    <div class="app_box_content">
                        <div class="app_box_content_left">成单情况</div>
                        <div class="app_box_content_right">
                            <span class="T4 C4">(次数：{{customerDetail.customerOrdersCount}}次 总费用：{{customerDetail.orderTotalFee}}元)</span>
                        </div>
                    </div>
                    <div class="material_box T3">
                        <div class="app_box_flex">
                            <div class="app_box_flex_2 T2">{{customerDetail.customerBasicInformation[0].c_name}}</div>
                            <div class="app_box_flex_1">
                                <span class="C4">{{$common.getTimes(customerDetail.customerOrders[0].apo_create_time,'shifen')}}</span>
                            </div>
                        </div>
                        <div class="app_box_flex">
                            <div class="app_box_flex_2">
                                <span class="C4">产品：</span>
                                {{customerDetail.customerOrders[0].apo_name}}
                            </div>
                            <div class="app_box_flex_1">
                                <span class="C4">对接：</span>
                                {{customerDetail.salesmanData[0].u_nickname}}
                            </div>
                        </div>
                        <div class="app_box_flex">
                            <div class="app_box_flex_2">
                                <span class="C4">原价：</span>
                                {{customerDetail.customerOrders[0].apo_old_price}}元
                            </div>
                            <div class="app_box_flex_1">
                                <span class="C4">现价：</span>
                                {{customerDetail.customerOrders[0].apo_new_price}}元
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="app_bottom_box">
            <div class="app_bottom_box_right" style="margin-right: 1px;" @click="callCustomer()">电话跟进</div>
            <div class="app_bottom_box_right" @click="addFollow()">添加跟进备注</div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {
        data() {
            return {
                isStop: true,
                browseContent: 0,
                customerBasicInformation: 0,
                customerFinalBrowseRecord: 0,
                customerOrders: 0,
                customerOrdersCount: 0,
                followUpRecord: 0,
                salesmanData: 0,
                serviceRecordCount: 0,
                sheetVisible: false,
                actions: []
            };
        },
        computed: {
            ...mapState({
                customerDetail: state => state.UserDetailModule.customerDetail
            })
        },
        mounted() {
            this.initActionSheet();
            this.initData();
        },
        methods: {
            //  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            followStatusAction() {
                console.log(this.isStop);

                this.$easyUtil.confirm(
                    this,
                    "停止确认",
                    "您确定要停止跟进该客户吗？",
                    () => {
                        var params = {
                            update_where: "c_id",
                            c_id: this.$route.query.customerId,
                            c_follow_status: this.isStop == true ? "2" : "0",
                            c_uid: 0
                        };

                        this.$easyUtil.startLoading(this);
                        this.$http.postHttp(this.$API.updateCustomer, params, rs => {
                            this.$easyUtil.endLoading(this);
                            this.$easyUtil.successToast(this, "客户跟进状态修改成功");

                            history.go(-1);
                        });
                    },
                    () => {
                        this.isStop = false
                    }
                );
            },
            initActionSheet() {
                var tempArr = [];
                var that = this;
                for (var i = 0; i <= 4; i++) {
                    tempArr.push({
                        id: i,
                        name: i + 1 + "类",
                        method: function (item) {
                            console.log(item.id);
                            that.updateEvaluate(item.id);
                        }
                    });
                }

                this.actions = tempArr;
            },
            updateEvaluate(item) {
                var params = {
                    update_where: "c_id",
                    c_id: this.$route.query.customerId,
                    c_evaluation: item //客户评定 0-A 1-B 2-C
                };

                console.log(params);

                this.$easyUtil.startLoading(this);
                this.$http.postHttp(this.$API.updateCustomer, params, rs => {
                    this.$easyUtil.endLoading(this);

                    this.$easyUtil.successToast(this, "客户类型编辑成功");

                    this.customerDetail.customerBasicInformation[0].c_evaluation = item;
                });
            },
            initData() {
                var that = this;
                this.$easyUtil.startLoading(this);
                this.$http.getHttp(
                    this.$API.apiCustomerDetail + "/customerId/" + this.$route.query.customerId,
                    rs => {
                        this.$easyUtil.endLoading(this);
                        console.log(rs);
                        that.$store.commit("UserDetailModule/updateCustomerDetail", rs);
                        that.browseContent = that.customerDetail.browseContent.length;
                        that.customerBasicInformation =
                            that.customerDetail.customerBasicInformation.length;
                        that.customerFinalBrowseRecord =
                            that.customerDetail.customerFinalBrowseRecord.length;
                        that.customerOrders = that.customerDetail.customerOrders.length;
                        that.customerOrdersCount = that.customerDetail.customerOrders.length;
                        that.followUpRecord = that.customerDetail.followUpRecordCount;
                        that.salesmanData = that.customerDetail.salesmanData.length;
                        that.serviceRecordCount = that.customerDetail.serviceRecord.length;

                        that.isStop =
                            this.customerDetail.customerBasicInformation[0].c_follow_status == "2"
                                ? true
                                : false;
                    }
                );
            },

            //查看历史记录
            historyFollow() {
                this.$easyUtil.GO(this, "/historyFollow", {
                    customerId: this.$route.query.customerId
                });
            },

            //查看客户服务记录
            serviceRecord() {
                this.$easyUtil.GO(this, "/serviceRecord", {
                    customerId: this.$route.query.customerId
                });
            },

            //添加跟进记录
            addFollow(e) {
                this.$easyUtil.GO(this, "/addFollow", {
                    customerId: this.$route.query.customerId
                });
            },

            //最近历史记录
            browsingRecords(item) {
                this.$easyUtil.GO(this, "/browsingRecords", {
                    c_openid: item[0].c_openid
                });
            },
            callCustomer() {
                window.location.href =
                    "tel:" + this.customerDetail.customerBasicInformation[0].c_phone;
            },
            //修改用户资料
            goCustomerDetail(e) {
                this.$easyUtil.GO(this, "/addClient", {
                    customerId: this.$route.query.customerId
                });
            },
            changeView() {
                this.sheetVisible = !this.sheetVisible;
            }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';

    .user_detail_list {
        overflow: hidden;
    }

    .user_detail_list .user_info {
        position: relative;
    }

    .user_detail_list .user_info i {
        position: absolute;
        right: -18px;
        top: 0;
        color: #2487ef;
    }

    .user_detail_list .txt_img {
        display: block;
        height: 30px;
        width: 30px;
        margin-left: 0;
        margin-right: 5px;
        text-align: center;
        line-height: 30px;
        color: gold;
        background: #000;
        float: left;
        border-radius: 100px;
        object-fit: cover;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    .user_detail_list .txt_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .click_btn span {
        color: #12c200;
    }

    .material_box {
        padding: 10px;
    }

    .material_box .app_box_flex {
        padding-bottom: 10px;
    }

    .material_box .app_box_flex:last-child {
        padding-bottom: 0px;
    }

    .material_box p {
        background: #f4f4f4;
        padding: 5px 10px;
        font-size: small;
        margin-bottom: 10px;
    }
</style>